<template>
  <div>
    <headers></headers>
    <div class="title">
      <div class="auto">首页  >  认证考试  >  个人账户信息  >  持有证书</div>
    </div>
    <div class="padding250">
      <div class="auto">
        <!--为空时-->
        <div class="null" style="display: none">
          <img src="../../../assets/null.jpg" alt="">
          <p class="text">暂时没有持有证书哦~</p>
          <router-link to="/addzhengshu"><Button icon="ios-add-circle-outline">添加证书</Button></router-link>
        </div>
        <!--不为空时-->
        <div class="jiaoyu clearfix" >
          <div class="titles">
            持有证书  <router-link to="/addzhengshu"><Button icon="ios-add-circle-outline" class="pull-right">登记新证书</Button></router-link>
          </div>
          <div class="list" v-for="item in certificateList">
            <div class="name">{{item.certificateName}}
              <Button v-on:click="delUserCertificate(item)" class="pull-right" v-if="item.del == 1">删除</Button>
            </div>
            <ul>
              <li>
                证书编号：{{item.certificateNum}}
              </li>
              <li class="text">登记时间： {{item.awardTime}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getUserCertificate, delUserCertificate} from "../../../http"
  import headers from '../../template/header'
  import footers from '../../template/footer'
  export default {
    name: '',
    props: {},
    data() {
      return {
        certificateList: [],
        certificateType: ''
      };
    },
    methods: {
      getUserCertificate(){
        getUserCertificate().then(res => {
          this.certificateList = res.data.userctList
          this.certificateType = res.data.certificateType
          console.info(res.data)
        })
      },
      delUserCertificate(v){
        delUserCertificate({certificateId: v.id}).then(res => {
          if(res.code == 200){
            this.$Notice.success({
              title: '登记证书提醒',
              desc: '删除证书成功',
              duration: 3,
            });
            this.getUserCertificate()
          }
        })
      }
    },
    created() {
      this.getUserCertificate()
    },
    components: {
      headers,
      footers
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null{
    text-align: center;
    padding: 200px 0;
    .text{
      font-size: 14px;
      color: #999;
      margin: 10px 0 60px;
    }
  }
  button{
    background-color: #B2936B;
    color: #fff;
    display: inline-block;
    width: 200px;
    height: 50px;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
  }
  .title{
    font-size: 14px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    background-color: #2F261E;
    text-align: left;
  }
  .padding250 .auto{
    background-color: #fff;
    margin-top: 30px;
    .jiaoyu{
      padding: 40px;
      .titles{
        font-size: 20px;
        color: #000;
        margin-bottom: 70px;
        text-align: left;
      }
      .list{
        border-radius: 5px;
        padding: 30px;
        box-shadow: 0px 0px 10px #ececec;
        text-align: left;
        margin-bottom: 40px;
        margin-right: 50px;
        float: left;
        width: 535px;
        .name{
          font-size: 20px;
          color: #000;
          margin-bottom: 20px;
          button{
            border:1px solid #B2936B;
            color: #B2936B;
            font-size: 16px;
            background-color: #fff;
            width: 80px;
            height: 36px;
            line-height: 20px;
          }
        }
        li{
          font-size: 14px;
          color: #000;
          margin-bottom: 10px;
          .zhuanye{
            margin-left: 20px;
          }
        }
        .text{
          color: #666;
        }
        &:nth-child(2n+1){
          margin-right: 0;
        }
      }

    }

  }
</style>
